import React, { Component } from 'react'
import { Modal, Form, Select, DatePicker, Input, InputNumber, Upload, Button } from 'antd'
import { UploadOutlined } from '@ant-design/icons'
import PropTypes from 'prop-types'
import moment from 'moment'
import { getUploadProps, strToNum } from '@js/tool'
const { Item } = Form
const { Option, OptGroup } = Select
export default class PayModal extends Component {
  state = {
    fileList: []
  }

  formRef = React.createRef()

  initForm () {
    this.setState({
      fileList: []
    })
    setTimeout(() => {
      const bill = this.props.billData
      const t = bill.pay_datetime
      const data = {
        ...bill,
        pay_amount: bill.amount || this.props.caseDetail.fee,
        ispay: '交费',
        pay_datetime: moment(t ? t * 1000 : Date.now())
      }
      this.formRef.current.setFieldsValue(data)
    }, 100)
  }

  // 改变交费方式
  changeFeeType (v) {
    const c = this.formRef.current
    const d = this.props.caseDetail
    if (v === '交费') {
      c.setFieldsValue({
        ispay: v,
        pay_amount: d.fee
      })
    } else {
      c.setFieldsValue({
        ispay: v,
        pay_amount: ''
      })
    }
  }

  computeFee () {
    const c = this.formRef.current
    if (c) {
      const o = c.getFieldsValue()
      c.setFieldsValue({
        pay_amount: strToNum(o.fee_acceptance) + strToNum(o.fee_processing) + strToNum(o.fee_other)
      })
    }
  }

  componentDidUpdate (prev) {
    if (prev.visible !== this.props.visible && this.props.visible) {
      this.initForm()
    }
  }

  render () {
    const caseDetail = this.props.caseDetail || {}
    const applicants = (caseDetail.applicants || []).filter(li => li.status)
    const respondents = (caseDetail.respondents || []).filter(li => li.status)
    return (
      <Modal
        title='录入交费信息'
        open={this.props.visible}
        onOk={() => this.formRef.current.submit()}
        onCancel={() => this.props.hide()}
        okText='确定'
        cancelText='取消'
        destroyOnClose
      >
        <Form name='pay-modal-form' labelCol={{ flex: '80px' }} ref={this.formRef} initialValues={{ ispay: '交费' }} onFinish={d => this.props.onFinish(d)}>
          <Item name='id' noStyle><span /></Item>
          <Item name='ispay' noStyle><span /></Item>
          <Item label='交费时间' name='pay_datetime' rules={[{ required: true, message: '交费时间不能为空' }]}>
            <DatePicker style={{ width: '100%' }} />
          </Item>
          <Item label='交费单号' name='platform_serialno'>
            <Input placeholder='请输入交费单号' />
          </Item>
          <Item label='受理费' name='fee_acceptance'>
            <InputNumber
              placeholder='请输入受理费'
              formatter={value => `¥ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
              parser={value => value.replace(/¥\s?|(,*)/g, '')}
              style={{ width: '100%' }}
              onChange={e => this.computeFee()}
            />
          </Item>
          <Item label='处理费' name='fee_processing'>
            <InputNumber
              placeholder='请输入处理费'
              formatter={value => `¥ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
              parser={value => value.replace(/¥\s?|(,*)/g, '')}
              style={{ width: '100%' }}
              onChange={e => this.computeFee()}
            />
          </Item>
          <Item label='其他费用' name='fee_other'>
            <InputNumber
              placeholder='请输入其他费用'
              formatter={value => `¥ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
              parser={value => value.replace(/¥\s?|(,*)/g, '')}
              style={{ width: '100%' }}
              onChange={e => this.computeFee()}
            />
          </Item>
          <Item label='缴费金额' name='pay_amount'>
            <InputNumber
              placeholder='请输入缴费金额'
              formatter={value => `¥ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
              parser={value => value.replace(/¥\s?|(,*)/g, '')}
              style={{ width: '100%' }}
              readOnly
            />
          </Item>
          <Item label='支付人' name='payer_actual'>
            <Select placeholder='请选择支付人' allowClear>
              <OptGroup label='申请人'>
                {applicants.filter(li => li.status).map(li => <Option key={li.id} value={li.name}>{li.name}</Option>)}
              </OptGroup>
              <OptGroup label='被申请人'>
                {respondents.filter(li => li.status).map(li => <Option key={li.id} value={li.name}>{li.name}</Option>)}
              </OptGroup>
            </Select>
          </Item>
          <Item name='description' label='交费原因'>
            <Input placeholder='请输入交费原因' />
          </Item>
          <Item name='remark1' label='减/缓情况'>
            <Input placeholder='请输入减/缓情况' />
          </Item>
          <Item name='file' label='交费凭证'>
            <Upload {...getUploadProps.call(this, this.formRef)}>
              <Button disabled={this.state.fileList.length !== 0}>
                <UploadOutlined /> 上传文件
              </Button>
            </Upload>
          </Item>
          <Item label='支付备注' name='remark' style={{ marginBottom: 0 }}>
            <Input placeholder='请输入支付备注' style={{ width: '100%' }} />
          </Item>
        </Form>
      </Modal>
    )
  }
}

PayModal.propTypes = {
  visible: PropTypes.bool,
  hide: PropTypes.func,
  caseDetail: PropTypes.object,
  billData: PropTypes.object,
  onFinish: PropTypes.func
}

PayModal.defaultProps = {
  visible: false,
  hide: function () {},
  caseDetail: {},
  billData: {},
  onFinish: () => {}
}
